<template>
	<view class="page">
		<!-- 头部 -->
		<!-- #ifdef MP-WEIXIN -->
			<topVue>
				<view class="slotVue flex align-center padding-row30">
					<text class="fw600 fs34">合作场地</text>
				</view>
			</topVue>
		<!-- #endif -->
		<view class="selectVue flex align-center padding-row30">
			<u-icon name="map-fill" color="#333" size="30"></u-icon>
			<text class="fw600">武汉市</text>
		</view>
		
		<view class="item flex align-center relative" v-for="(item,index) in 10" :key="index">
			<u-avatar src="100" size="116" mode="square"></u-avatar>
			<view class="right flex-column flex-between">
				<view class="fw600">猫脸音乐·舞·酒吧</view>
				<view class="limit fs24">可容纳100人</view>
				<view class="address fs24 line-1">湖北省武汉市汉阳区解放大道万达广场2001</view>
				<view class="contract absolute-middle" @click="phoneCall()">联系场地</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			phoneCall(){
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			}
		}
	}
</script>

<style lang="less" scoped>
.slotVue {
	width: 100%;
	height: 100%;
}
.selectVue {
	width: 100%;
	height: 80rpx;
	padding-bottom: 10rpx;
	text {
		padding-left: 8rpx;
	}
}
.item {
	width: 690rpx;
	background: #F7F7F9;
	border-radius: 16rpx;
	padding: 20rpx;
	margin: 0 auto 20rpx;
	.right {
		flex: 1;
		height: 106rpx;
		padding-left: 20rpx;
		.address {
			padding-right: 160rpx;
			line-height: 1;
		}
		.limit {
			font-weight: 600;
			font-size: 24rpx;
			color: #333333;
		}
		.contract {
			width: 140rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			background: #FC132F;
			border-radius: 28rpx;
			font-size: 24rpx;
			color: #fff;
			right: 20rpx;
		}
	}
}
</style>
